Highcharts একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন এবং চার্ট তৈরি করার জন্য ব্যবহৃত হয়। Highcharts বিভিন্ন ধরনের এক্সপোর্ট এবং প্রিন্টিং ফিচার প্রদান করে যা ব্যবহারকারীদের চার্টের ডেটা এক্সপোর্ট বা প্রিন্ট করার সুযোগ দেয়। আপনি PNG, JPEG, PDF, SVG ফরম্যাটে চার্ট এক্সপোর্ট করতে পারেন, এবং প্রিন্ট অপশন ব্যবহার করে সরাসরি চার্ট প্রিন্ট করতে পারেন।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Highcharts এ এক্সপোর্ট এবং প্রিন্টিং ফিচার ইন্টিগ্রেট করা যায়।

স্টেপ 1: Highcharts এক্সপোর্ট মডিউল ইন্টিগ্রেশন

Highcharts এর এক্সপোর্ট ফিচারটি ব্যবহার করার জন্য আপনাকে highcharts-exporting মডিউল ইনস্টল করতে হবে। এই মডিউলটি Highcharts এর এক্সপোর্ট ফিচার সক্রিয় করে।

1. highcharts-exporting ইনস্টল করুন:

npm install highcharts-exporting --save

2. app.component.ts ফাইলে highcharts-exporting মডিউল ইমপোর্ট করুন:

import * as Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';  // Exporting মডিউল ইমপোর্ট করা

Exporting(Highcharts);  // Exporting ফিচার সক্রিয় করা

স্টেপ 2: Highcharts চার্টে এক্সপোর্ট এবং প্রিন্টিং অপশন যোগ করা

এখন, Highcharts এর চার্ট কনফিগারেশনে এক্সপোর্ট এবং প্রিন্টিং অপশন যোগ করা হবে।

1. app.component.ts ফাইলে Highcharts এর কনফিগারেশন তৈরি করুন:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';

Exporting(Highcharts);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  ngOnInit() {
    // Highcharts কনফিগারেশন সেটআপ করা
    this.chartOptions = {
      chart: {
        type: 'column'
      },
      title: {
        text: 'ডেটা এক্সপোর্ট এবং প্রিন্টিং ফিচার'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
      },
      yAxis: {
        title: {
          text: 'মান'
        }
      },
      series: [{
        name: 'বিক্রয়',
        data: [10, 20, 30, 40, 50]
      }],
      exporting: {
        enabled: true, // এক্সপোর্ট অপশন সক্রিয় করা
        buttons: {
          contextButton: {
            menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG', 'separator', 'printChart']
          }
        }
      }
    };
  }
}

স্টেপ 3: Highcharts কম্পোনেন্টের মধ্যে এক্সপোর্ট এবং প্রিন্টিং ফিচার ব্যবহার করা

এখন, app.component.html ফাইলে Highcharts কম্পোনেন্ট যোগ করুন যাতে ব্যবহারকারীরা এক্সপোর্ট এবং প্রিন্ট অপশন ব্যবহার করতে পারেন।

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

ব্যাখ্যা:

1. Exporting মডিউল: highcharts/modules/exporting মডিউলটি Highcharts এর এক্সপোর্ট ফিচার সক্রিয় করে। এতে আপনি PNG, JPEG, PDF, SVG ফরম্যাটে চার্ট ডাউনলোড করতে পারবেন।
2. buttons.contextButton.menuItems: এখানে বিভিন্ন এক্সপোর্ট অপশন (downloadPNG, downloadJPEG, downloadPDF, downloadSVG, separator, printChart) কনফিগার করা হয়েছে। এটি ইউজারকে বিভিন্ন ফরম্যাটে ডেটা এক্সপোর্ট বা প্রিন্ট করার অপশন দেয়।
3. printing: printChart অপশনটি চার্ট প্রিন্ট করার জন্য ব্যবহার করা হয়। ইউজার ক্লিক করলে ব্রাউজার প্রিন্ট ডায়ালগ উইন্ডো খুলে যাবে এবং তারা সরাসরি চার্ট প্রিন্ট করতে পারবে।

সারাংশ

Highcharts এর এক্সপোর্টিং এবং প্রিন্টিং ফিচার ইন্টিগ্রেট করার মাধ্যমে আপনি আপনার চার্টে ডেটা এক্সপোর্ট এবং প্রিন্ট করার সুবিধা দিতে পারবেন। ব্যবহারকারী চাইলে চার্টের ডেটা PNG, JPEG, PDF, SVG ফরম্যাটে এক্সপোর্ট করতে পারে বা সরাসরি প্রিন্ট করতে পারে। Highcharts এর এই ফিচারটি ডেটা রিপোর্টিং এবং ভিজ্যুয়ালাইজেশন আরও কার্যকর এবং ইন্টারঅ্যাকটিভ করে তোলে।